/*
  项目课程表
*/
import style from './index.less';

import {
  DatePicker,
  Space,
  Input,
  Select,
  Table,
  Tag,
  Tabs,
  Modal,
  Button,
  message,
} from 'antd';
import { Form } from 'antd';
// import * as React from 'react';
import request from '@/http';

import { history } from '@/.umi/core/history';
import All_style from '../../index.less';
import { Link } from 'react-router-dom';
import React, { useState } from 'react';
const { RangePicker } = DatePicker;
const { TabPane } = Tabs;
const { Option } = Select;

// const project = [];
const Course = (props: any) => {
  const columns = [
    {
      title: '日期',
      dataIndex: 'projectDate',
      key: 'projectDate',
    },
    {
      title: '项目名称',
      dataIndex: 'courseName',
      key: 'courseName',
    },
    {
      title: '实训老师',
      dataIndex: 'teacherNames',
      key: 'teacherNames',
    },
    {
      title: '责任老师',
      dataIndex: 'responsibleTeacherName',
      key: 'responsibleTeacherName',
    },
    {
      title: '签到时间',
      dataIndex: 'signInTime',
      key: 'signInTime',
    },
    {
      title: '签退时间',
      dataIndex: 'signOutTime',
      key: 'signOutTime',
    },
    {
      title: '教室',
      dataIndex: 'classRome',
      key: 'classRome',
    },
    {
      title: '备注',
      dataIndex: 'remark',
      key: 'remark',
    },
    {
      title: '操作',
      key: 'course_actio',
      render: (row: any) => (
        <>
          <Button
            type="link"
            onClick={() => {
              studentEdit(row);
            }}
          >
            查看学生
          </Button>
        </>
      ),
    },
  ];
  const columns1 = [
    {
      title: '小组名称',
      dataIndex: 'teamName',
      key: 'teamName',
      align: 'center',
      // render: text => <a>{text}</a>,
    },
    {
      title: '院系',
      dataIndex: 'collegesName',
      key: 'collegesName',
      align: 'center',
      //   render: text => <a>{text}</a>,
    },
    {
      title: '专业',
      dataIndex: 'majorName',
      key: 'majorName',
      align: 'center',
      // render: text => <a>{text}</a>,
    },
    {
      title: '年级',
      dataIndex: 'yearName',
      key: 'yearName',
      align: 'center',
    },
    {
      title: '班级',
      dataIndex: 'className',
      key: 'className',
      align: 'center',
    },
    {
      title: '班主任',
      dataIndex: 'teacherName',
      key: 'teacherName',
      align: 'center',
    },
    {
      title: '学生姓名',
      dataIndex: 'name',
      key: 'name',
      align: 'center',
    },
    {
      title: '学号',
      dataIndex: 'userNo',
      key: 'userNo',
      align: 'center',
    },
    {
      title: '身份证号',
      dataIndex: 'idNo',
      key: 'idNo',
      align: 'center',
    },
    {
      title: '性别',
      dataIndex: 'sex',
      key: 'sex',
      align: 'center',
      render: (text: any, row: any) => {
        return row.sex === 1 ? '男' : '女';
      },
    },
    {
      title: '邮箱',
      dataIndex: 'email',
      key: 'email',
      align: 'center',
    },
    {
      title: '手机号',
      dataIndex: 'mobileNo',
      key: 'mobileNo',
      align: 'center',
    },
    {
      title: '项目角色',
      dataIndex: 'position',
      key: 'position',
      align: 'center',
      render: (text: any, row: any) => {
        return row.position == '1'
          ? '前端开发'
          : row.position == '2'
          ? '测试'
          : row.position == '3'
          ? '后端开发'
          : row.position == '4'
          ? '项目经理'
          : row.position == '5'
          ? '产品经理'
          : row.position == '6'
          ? 'UI'
          : '';
      },
    },
  ];
  const [visible1, setVisible1] = React.useState<any>();
  const [formObject] = Form.useForm();
  const [courseId, setCourseId] = React.useState();
  //const [groupId,setTeamInfoId] = React.useState();

  /**
   * 查看学生详情
   */
  const studentEdit = (row: any) => {
    setVisible1(true);
    student(row.courseId);
    setCourseId(row.courseId);
  };
  const modelOnCancel1 = () => {
    setVisible1(false);
  };
  const [students, setStudents] = React.useState();
  const student = async (courseId: any) => {
    const selectForm = await formObject.validateFields(); //获得表单数据
    const students: any = await request.post('/course/teacher/seeStudent', {
      courseProjectInfoId: courseId,
      number: 10,
      page: 1,
      ...selectForm,
      //teamInfoId:groupId,
    });
    const Student: any = students.date.returnDate.map((d: any) => {
      return {
        teamName: d.teamName,
        collegesName: d.collegesName,
        majorName: d.majorName,
        yearName: d.yearName,
        className: d.className,
        teacherName: d.teacherName,
        name: d.name,
        userNo: d.userNo,
        idNo: d.idNo,
        gender: d.gender,
        email: d.email,
        isTeamLeader: d.isTeamLeader,
        teamInfoId: d.teamInfoId,
        studentId: d.studentId,
        mobileNo: d.mobileNo,
        position: d.position,
      };
    });
    setStudents(Student);
  };
  // 实训老师下拉框绑定接口
  const [trTeacherName, setTrTeacherName] = React.useState([]);
  const TrTeacherName = async () => {
    const TrTeacherName: any = await request.get(
      // '/user_info_manage/getTrTeacherName',
      '/common/getTrainingTeacher',
    );
    // console.log(TrTeacherName.data);
    setTrTeacherName(TrTeacherName.date);
    console.log(trTeacherName);
  };
  //责任老师下拉框绑定接口
  const [reTeacherName, setReteacherName] = React.useState([]);
  const ReTeacherName = async () => {
    const ReTeacherName: any = await request.get(
      '/common/getResponsibleTeacher',
    );
    setReteacherName(ReTeacherName.date);
  };
  // 项目名称下拉框绑定接口
  const [courseName, setCourseName] = React.useState([]);
  const CourseName = async () => {
    const CourseName: any = await request.post('/common/getCourse', {
      isGraduation: 1,
    });
    console.log(CourseName.date);
    setCourseName(CourseName.date);
  };
  /**
   * 查询课程
   */
  const [dataS, setDataS] = React.useState();
  const selectCourse = async () => {
    const selectForm = await formObject.validateFields(); //获得表单数据
    // 处理日期数据
    const date1 = selectForm?.date
      ? selectForm?.date[0]?.format('YYYY-MM-DD hh:mm:ss')
      : '';
    const date2 = selectForm?.date
      ? selectForm?.date[1]?.format('YYYY-MM-DD hh:mm:ss')
      : '';
    const res: any = await request.post('/course/selectCourse', {
      number: 5,
      page: 1,
      projectEndDate: date2,
      projectStartDate: date1,
      courseName: selectForm.courseName,
      teacherId: selectForm.teacherId,
      responsibleTeacherId: selectForm.responsibleTeacherId,
    });
    if (res.code == '200') {
      const data = res.date.returnDate.map((d: any) => {
        return {
          id: d.id,
          classRome: d.classRome,
          courseId: d.courseId,
          courseName: d.courseName,
          courseProjectInfoId: d.courseProjectInfoId,
          projectDate: d.projectDate,
          remark: d.remark,
          responsibleTeacherName: d.responsibleTeacherName,
          signInTime: d.signInTime,
          signOutTime: d.signOutTime,
          teacherNames: d.teacherNames,
          teacherId: d.teacherId,
        };
      });
      setDataS(data);
    }
  };

  //李鸿
  //查看学生下拉栏
  const [projectSearchValue, setProjectSearchValue] = React.useState('');
  const searchProjectOnChange = (value: any) => {
    setProjectSearchValue(value.target.value);
  };
  //小组名称下拉
  const [group, setGroup] = React.useState([]);
  //const [groupId,setGroupId] = React.useState();
  const getGroup = async () => {
    const Group: any = await request.post('/team/selectTeam', {
      isGraduation: 1,
      teamName: projectSearchValue,
      page: 1,
      number: 10,
    });
    console.log(Group);
    if (Group.code == '200') {
      setGroup(Group.date.returnDate);
      //selGroup(Group.date.returnDate[0].teamInfoId);
      //setGroupId(Group.teamInfoId);
    } else {
      message.error(Group.message); //弹出错误信息
    }
  };
  //专业
  const [major, setMajor] = React.useState([]);
  const getMajor = async () => {
    const Major: any = await request.get('/common/getMajor');
    if (Major.code == '200') {
      setMajor(Major.date);
    } else {
      message.error(Major.message); //弹出错误信息
    }
  };
  //年级
  const [grade, setGrade] = React.useState([]);
  const getGrade = async () => {
    const Grade: any = await request.get('/common/getYear');
    if (Grade.code == '200') {
      setGrade(Grade.date);
    } else {
      message.error(Grade.message); //弹出错误信息
    }
  };
  //班级
  const [className, setClassName] = React.useState([]);
  const getClass = async () => {
    const className: any = await request.get('/common/getClassBase');
    if (className.code == '200') {
      setClassName(className.date);
    } else {
      message.error(className.message); //弹出错误信息
    }
  };

  const loadData = async () => {
    const selectForm = await formObject.validateFields(); //获得表单数据
    // 处理日期数据
    const date1 = selectForm?.date
      ? selectForm?.date[0]?.format('YYYY-MM-DD HH:mm:ss')
      : '';
    const date2 = selectForm?.date
      ? selectForm?.date[1]?.format('YYYY-MM-DD HH:mm:ss')
      : '';
  };
  // 重置按钮
  const onReset = () => {
    formObject.resetFields();
    console.log('重置成功');
  };

  // 页面预加载
  React.useEffect(() => {
    selectCourse();
    CourseName();
    TrTeacherName();
    ReTeacherName();
    getGroup(); //小组名称
    getMajor();
    getGrade();
    getClass();
    // loadData(pageInfo.current, pageInfo.pageSize);
    // ReTeacherName();
  }, []);

  return (
    <div className={All_style.box}>
      <Form form={formObject}>
        <div>
          <Form.Item
            label="日期："
            name="date"
            style={{ float: 'left' }}
            className={All_style.data}
          >
            {/* <DatePicker className={All_style.select} /> */}
            <RangePicker></RangePicker>
          </Form.Item>

          <Form.Item
            label="项目名称："
            name="courseName"
            style={{ float: 'left' }}
            className={All_style.formItem}
          >
            <Select
              allowClear
              placeholder="请选择"
              className={All_style.select}
              optionFilterProp="children"
              showSearch
            >
              {courseName.map((c: any, index) => {
                return (
                  <Option key={c.id} value={c.format}>
                    {c.format}
                  </Option>
                );
              })}
            </Select>
          </Form.Item>

          <Form.Item
            label="实训老师："
            name="teacherId"
            style={{ float: 'left' }}
            className={All_style.formItem}
          >
            <Select
              allowClear
              placeholder="请选择"
              className={All_style.select}
              optionFilterProp="children"
              showSearch
            >
              {trTeacherName.map((c: any) => {
                return (
                  <Option key={c.id} value={c.id}>
                    {c.format}
                  </Option>
                );
              })}
            </Select>
          </Form.Item>
          <Form.Item
            label="责任老师："
            name="responsibleTeacherId"
            style={{ float: 'left' }}
            className={All_style.formItem}
          >
            <Select
              allowClear
              placeholder="请选择"
              className={All_style.select}
              optionFilterProp="children"
              showSearch
            >
              {reTeacherName.map((c: any) => {
                return (
                  <Option key={c.id} value={c.id}>
                    {c.format}
                  </Option>
                );
              })}
            </Select>
          </Form.Item>
          <div style={{ clear: 'both', float: 'right', marginRight: 80 }}>
            <Button
              type="primary"
              className={All_style.button}
              onClick={selectCourse}
            >
              查询
            </Button>
            <Button
              htmlType="button"
              onClick={onReset}
              className={All_style.button2}
            >
              重置
            </Button>
          </div>
        </div>
      </Form>
      <Table
        columns={columns}
        dataSource={dataS}
        className={All_style.table}
        // pagination={pageInfo}
      />
      <Modal
        title="学生详情"
        width={1250}
        maskClosable={false}
        visible={visible1}
        // onOk={modelOnOk1}
        destroyOnClose
        onCancel={modelOnCancel1}
        okText="确认"
        cancelText="取消"
      >
        <Form name="selectForm" form={formObject} preserve={false}>
          <div>
            <div style={{ clear: 'both' }}>
              <Form.Item
                name="teamName"
                label="小组名称"
                style={{ float: 'left' }}
                className={All_style.formItem}
              >
                <Select placeholder="请选择" className={All_style.select}>
                  {group.map((c: any, index) => {
                    return (
                      <Option key={`k_${index}`} value={c.teamName}>
                        {c.teamName}
                      </Option>
                    );
                    //setTeamInfoId(c.index);
                  })}
                </Select>
              </Form.Item>

              <Form.Item
                name="majorId"
                label="专业："
                style={{ float: 'left', marginLeft: 30 }}
                className={All_style.formItem}
              >
                <Select placeholder="请选择">
                  {major.map((c: any, index: any) => {
                    return (
                      <Option key={`k_${index}`} value={c.id}>
                        {c.format}
                      </Option>
                    );
                  })}
                </Select>
              </Form.Item>

              <Form.Item
                name="yearInfoId"
                label="年级："
                style={{ float: 'left', marginLeft: 30 }}
                className={All_style.formItem}
              >
                <Select placeholder="请选择" className={All_style.select}>
                  {grade.map((c: any, index: any) => {
                    return (
                      <Option key={`k_${index}`} value={c.id}>
                        {c.format}
                      </Option>
                    );
                  })}
                </Select>
              </Form.Item>

              <Form.Item
                name="classBaseInfoId"
                label="班级："
                style={{ float: 'left', marginLeft: 30 }}
                className={All_style.formItem}
              >
                <Select placeholder="请选择" className={All_style.select}>
                  {className.map((c: any, index: any) => {
                    return (
                      <Option key={`k_${index}`} value={c.id}>
                        {c.format}
                      </Option>
                    );
                  })}
                </Select>
              </Form.Item>
            </div>

            <Form.Item
              name="name"
              label="学员姓名"
              style={{ float: 'left', marginLeft: 30 }}
              className={All_style.formItem}
            >
              <Input
                placeholder="支持模板查询"
                className={All_style.select}
              ></Input>
            </Form.Item>

            <Form.Item
              name="userNo"
              label="学号"
              style={{ float: 'left', marginLeft: 30 }}
              className={All_style.formItem}
            >
              <Input
                placeholder="精准匹配"
                className={All_style.select}
              ></Input>
            </Form.Item>

            <Button
              className={All_style.button}
              style={{ marginLeft: 30 }}
              onClick={() => {
                student(courseId);
              }}
            >
              查询
            </Button>
            <Button className={All_style.button2} onClick={onReset}>
              重置
            </Button>
          </div>
        </Form>

        <Table
          columns={columns1}
          dataSource={students}
          className={All_style.table}
        />
      </Modal>
    </div>
  );
};
export default Course;
